<template>
    <div class="app-container storage-index">
        <el-row :gutter="20">
            <el-col :md="24" :lg="14" class="mb20">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>货物情况汇总</span>
                    </div>
                    <el-row :gutter="20" class="pl20 pr20" v-loading="summaryOfGoodsLoading">
                        <el-col :xs="24" :sm="12" :lg="6" class="mb20">
                            <div class="bg-F1F7FF text-center item-size">
                                <span>高龄货物数量</span>
                                <p class="mt20">
                                    <span class="font-size-24 color-295ABD"  v-countRunning="summaryOfGoodsData.buyWeight" >0</span>
                                    <span>吨</span>
                                </p>
                            </div>
                        </el-col>
                        <el-col :xs="24" :sm="12" :lg="6" class="mb20">
                            <div class="bg-F1FFEC text-center item-size">
                                <span>在库货物数量</span>
                                <p class="mt20">
                                    <span class="font-size-24 color-61DA5B" v-countRunning="summaryOfGoodsData.whse">0</span>
                                    <span>吨</span>
                                </p>
                            </div>
                        </el-col>
                        <el-col :xs="24" :sm="12" :lg="6" class="mb20">
                            <div class="bg-FFF7EE text-center item-size">
                                <span>货物担保金额</span>
                                <p class="mt20">
                                    <span class="font-size-24 color-FC9A32" v-countRunning="summaryOfGoodsData.pledge">0</span>
                                    <span>万元</span>
                                </p>
                            </div>
                        </el-col>
                        <el-col :xs="24" :sm="12" :lg="6" class="mb20">
                            <div class="bg-FFF6F6 text-center item-size">
                                <span>当月仓库作业量</span>
                                <p class="mt20">
                                    <span class="font-size-24 color-ED6E6B" v-countRunning="summaryOfGoodsData.marginNum">0</span>
                                    <span>吨</span>
                                </p>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :md="24" :lg="10" class="mb20">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>快速入口</span>
                    </div>
                    <el-row class="pb20 pl20 pr20">
                        <el-col :xs="8" :sm="{span:'1-5'}" v-hasPermi="['zhcloud:hwrc:list']">
                            <div class="text-center mt10 item-box" @click="goWarehouseIn">
                                <span class="display-inline mb5">
                                    <span class="item-circle-size bg-F1F7FF">
                                        <img src="@/assets/images/storage/home_rc_icon01.png"/>
                                    </span>
                                </span>
                                <p>货物入仓</p>
                            </div>
                        </el-col>
                        <el-col :xs="8" :sm="{span:'1-5'}" v-hasPermi="['zhcloud:hwcc:list']">
                            <div class="text-center mt10 item-box"  @click="goWarehouseOut">
                                <span class="display-inline mb5">
                                    <span class="item-circle-size bg-F1FFEC">
                                        <img src="@/assets/images/storage/home_cc_icon02.png"/>
                                    </span>
                                </span>
                                <p>货物出仓</p>
                            </div>
                        </el-col>
                        <el-col :xs="8" :sm="{span:'1-5'}" v-hasPermi="['zhcloud:hqzy:list']">
                            <div class="text-center mt10 item-box"  @click="goWarehouseProperty">
                                <span class="display-inline mb5">
                                    <span class="item-circle-size bg-FFF7EE">
                                        <img src="@/assets/images/storage/home_zy_icon03.png"/>
                                    </span>
                                </span>
                                 <p>货权转移</p>
                            </div>
                        </el-col>
                        <el-col :xs="8" :sm="{span:'1-5'}"  v-hasPermi="['zhcloud:hwtc:list']">
                            <div class="text-center mt10 item-box"  @click="goWarehouseMove">
                                <span class="display-inline mb5">
                                    <span class="item-circle-size bg-FFF6F6">
                                        <img src="@/assets/images/storage/home_dc_icon04.png"/>
                                    </span>
                                </span>
                                 <p>货物调仓</p>
                            </div>
                        </el-col>
                        <el-col :xs="8" :sm="{span:'1-5'}" v-hasPermi="['zhcloud:zzfwf:list']">
                            <div class="text-center mt10 item-box" @click="goIncreServiceFee">
                                <span class="display-inline mb5">
                                    <span class="item-circle-size bg-F6F4FF">
                                        <img src="@/assets/images/storage/home_zz_icon05.png"/>
                                    </span>
                                </span>
                                <p>增值服务</p>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :md="24" :lg="14" class="mb20">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>月周转率</span>
                    </div>
                    <el-table
                        v-loading="monthTurnoverLoading"
                        :data="monthTurnoverData"
                    >
                        <af-table-column prop="allName" label="客户"></af-table-column>
                        <af-table-column prop="spslom1" label="月出仓量 (吨)"></af-table-column>
                        <af-table-column prop="spslym1" label="月总库存 (吨)"></af-table-column>
                        <af-table-column prop="zzlm1" label="月周转率"></af-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :md="24" :lg="10" class="mb20">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>高龄库存</span>
                    </div>
                    <el-table
                        v-loading="monthTurnoverLoading"
                        :data="agedInventoryData"
                    >
                        <af-table-column prop="allName" label="客户"></af-table-column>
                        <af-table-column prop="spjs" label="件数"></af-table-column>
                        <af-table-column prop="spsl" label="数量 (吨)"></af-table-column>
                    </el-table>
                </el-card>
            </el-col>
            <el-col :md="24" :lg="14" class="mb20">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>5个品种占比情况（按月）</span>
                    </div>
                    <div id="proportionOfVarietiesByMonthChartId" :style="proportionOfVarietiesByMonthChartStyle" ></div>
                </el-card>
            </el-col>
            <el-col :md="24" :lg="10" class="mb20">
                <el-card>
                    <div slot="header" class="clearfix">
                        <span>净流入量情况（按月）</span>
                    </div>
                    <div id="netInflowMonthlyChartId" :style="netInflowMonthlyChartStyle" ></div>
                </el-card>
            </el-col>
        </el-row>
        <div class="text-center mt20">
            <span class="font-size-12 color-505050">中恒纺织交易市场（广东）有限公司   粤ICP备19042832号-1</span>
        </div>
    </div>
</template>

<script>
import { getMonthTurnover, getAgedInventory, getProportionOfVarietiesByMonth, getNetInflowMonthly, getSummaryOfGoods } from '@/api/storage/index'
import echarts from 'echarts';
import variables from '@/assets/styles/variables.scss'

export default {
    name: "StorageIndex",
    data() {
        return {
            monthTurnoverLoading: true,
            agedInventoryLoading: true,
            summaryOfGoodsLoading:true,
            proportionOfVarietiesByMonthLoading: true,
            netInflowMonthlyLoading: true,
            monthTurnoverData:[],
            agedInventoryData:[],
            summaryOfGoodsData:{
                buyWeight:0,
                marginNum:0,
                pledge:0,
                whse:0
            },
            netInflowMonthlyChartStyle: {
                height:'350px',
                width:'105%',
                margin:'0 auto'
            },
            proportionOfVarietiesByMonthChartStyle: {
                height:'350px',
                width:'105%',
                margin:'0 auto'
            }
        }
    },
    created() {
        this.monthTurnover()
        this.agedInventory()
        this.summaryOfGoods()
    },
    mounted() {
        this.proportionOfVarietiesByMonth()
        this.netInflowMonthly()
    },
    computed: {
        variables() {
            return variables;
        }
    },
    methods: {
        summaryOfGoods() {
            this.summaryOfGoodsLoading = true
            getSummaryOfGoods({}).then(res => {
                this.summaryOfGoodsData = res.data
                this.summaryOfGoodsLoading = false
            })
        },
        monthTurnover() {
            this.monthTurnoverLoading = true
            getMonthTurnover({}).then(res => {
                this.monthTurnoverData = res.data
                this.monthTurnoverLoading = false
            })
        },
        agedInventory() {
            this.agedInventoryLoading = true
            getAgedInventory({}).then(res => {
                this.agedInventoryData = res.data
                this.agedInventoryLoading = false
            })
        },
        proportionOfVarietiesByMonth() {
            let chart = echarts.init(document.getElementById('proportionOfVarietiesByMonthChartId'))
            chart.showLoading({
                text:"",
                color:variables.defaultTheme,
                textColor:variables.defaultTheme,
                spinnerRadius: 18,
                lineWidth: 2,
            })
            getProportionOfVarietiesByMonth({}).then(res => {
                const data = res.data
                chart.hideLoading()
                this.initProportionOfVarietiesByMonthChart(data, chart)
            })
        },
        netInflowMonthly() {
            let chart = echarts.init(document.getElementById('netInflowMonthlyChartId'))
            chart.showLoading({
                text:"",
                color:variables.defaultTheme,
                textColor:variables.defaultTheme,
                spinnerRadius: 18,
                lineWidth: 2,
            })
            getNetInflowMonthly({}).then(res => {
                const data = res.data
                chart.hideLoading()
                this.initNetInflowMonthlyChart(data, chart)
            })
        },
        initNetInflowMonthlyChart(data, chart) {
            const xAxisName = data.map(item => item.ssrqid)
            const weight = data.map(item => item.jlr)
            let option = {
                itemStyle: {
                    color: ['#ed6e6b']
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                xAxis: [{
                    type: 'category',
                    data: xAxisName,
                    axisTick: {
                        alignWithLabel: true
                    }
                }],
                yAxis: [{
                    type: 'value',
                    name: '重量/吨',
                }],
                series: [{
                    name: '重量',
                    type: 'bar',
                    barGap:'20%',
                    barCategoryGap: '40%',
                    barWidth: '60%',
                    data: weight,
                }]
            }
             window.addEventListener('resize',() => {
                this.$nextTick(() => {
                    chart.resize()
                })
            })
            chart.setOption(option)
        },
        initProportionOfVarietiesByMonthChart(data, chart) {
            //蓝色，绿色,橙色,红色,紫色
            const color = ['#4E91DD','#7BDD76','#FC9A32','#ED6E6B','#8172F0']
            const xAxisName = data.c.map(i => {
                const arr = i.split('-')
                return arr[0] + '-' + arr[1]
            })
            const count = data.b.sort((i,j) => {
                return Number(i.split("支")[0]) - Number(j.split("支")[0])
            })
            const data1 = data.a
            let seriesData = []
            for(let i in count) {
                const seriesObj = {
                    name: count[i],
                    type: 'line',
                    barGap:'20%',
                    barCategoryGap: '40%',
                    barWidth: '60%',
                    data: data1[count[i]].map(item => item.spsl),
                    itemStyle: {
                        color: color[i]
                    }
                }
                seriesData.push(seriesObj)
            }
            let option = {
                legend: {
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                xAxis: [{
                    type: 'category',
                    data: xAxisName,
                    axisTick: {
                        alignWithLabel: true
                    }
                }],
                yAxis: [{
                    type: 'value',
                    name: '占比率 (%)',
                }],
                series: seriesData
            }
            window.addEventListener('resize',() => {
                this.$nextTick(() => {
                    chart.resize()
                })
            })
            chart.setOption(option)
        },
        goWarehouseIn() {
            this.$router.push({name:"WarehouseIn", params:{refresh:true}})
        },
        goWarehouseMove() {
            this.$router.push({name:"WarehouseMove", params:{refresh:true}})
        },
        goWarehouseOut() {
            this.$router.push({name:"WarehouseOut", params:{refresh:true}})
        },
        goWarehouseProperty() {
            this.$router.push({name:"WarehouseProperty", params:{refresh:true}})
        },
        goIncreServiceFee() {
            this.$router.push({name:"IncreServiceFee", params:{refresh:true}})
        }
    }
}
</script>

<style lang="scss" scoped>
    .el-col-sm-1-5 {
        width:20%;
    }
    .storage-index {
      padding:20px;
      .item-size {
        width:100%;
        height:108px;
        padding:26px 0;
        display: inline-block;
        border-radius: 5px;
      }
      .item-box {
        cursor: pointer;
        .item-circle-size {
            width: 76px;
            height: 76px;
            line-height: normal;
            border-radius: 38px;
            display:table-cell;
            vertical-align: middle;
            position:relative;
        }
        &:hover {
            .item-circle-size::before {
               content:"";
               display:block;
               position:absolute;
               top:0px;
               left:0px;
               width:100%;
               height:100%;
               border-radius:38px;
               background:rgba(0,0,0,0.1);
            }
        }
      }
    }
</style>